'use client';

import { useTranslation } from 'react-i18next';
import { IconButton, Menu, MenuItem, Tooltip, useTheme, Typography } from '@mui/material';
import { useState } from 'react';
import TranslateIcon from '@mui/icons-material/Translate';

export default function LanguageSwitcher() {
  const { i18n } = useTranslation();
  const theme = useTheme();
  const [anchorEl, setAnchorEl] = useState(null);
  const open = Boolean(anchorEl);

  const languages = [
    { code: 'en', label: 'English', flag: '🇬🇧' },
    { code: 'zh-CN', label: '简体中文', flag: '🇨🇳' },
    { code: 'tr', label: 'Türkçe', flag: '🇹🇷' }
  ];

  const currentLanguage = languages.find(lang => lang.code === i18n.language) || languages[0];

  const handleClick = event => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const handleLanguageChange = langCode => {
    i18n.changeLanguage(langCode);
    handleClose();
  };

  return (
    <>
      <Tooltip title="Change Language / 切换语言 / Dil Değiştir">
        <IconButton
          onClick={handleClick}
          size="small"
          sx={{
            bgcolor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.05)' : 'rgba(255, 255, 255, 0.15)',
            color: theme.palette.mode === 'dark' ? 'inherit' : 'white',
            p: 1,
            borderRadius: 1.5,
            '&:hover': {
              bgcolor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(255, 255, 255, 0.25)'
            }
          }}
        >
          <Typography variant="body2" fontWeight="medium" sx={{ mr: 0.5 }}>
            {currentLanguage.flag}
          </Typography>
          <TranslateIcon fontSize="small" />
        </IconButton>
      </Tooltip>
      <Menu
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'right'
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'right'
        }}
      >
        {languages.map(lang => (
          <MenuItem
            key={lang.code}
            onClick={() => handleLanguageChange(lang.code)}
            selected={i18n.language === lang.code}
          >
            <Typography variant="body2" sx={{ mr: 1 }}>
              {lang.flag}
            </Typography>
            {lang.label}
          </MenuItem>
        ))}
      </Menu>
    </>
  );
}
